<template>
    用户名 <input type="text" id="username_text" v-model="inputUN" /><br />
    密码 <input type="password" id="password_text" v-model="inputPW" /><br />
    验证码 <input type="text" id="captcha_text" v-model="inputCP" />
    <button type="button">{{ captcha }}</button><br />
    <button type="submit" @click="submitLogic">登录</button>
    <div id="loginReturnPad" v-if="isSubmit">
        <p id="login_return">{{ loginReturnText }}</p>
        <img id="loginSuccess" src="/src/assets/Smile.jpg" v-if="loginReturn"></img>
        <img id="loginFailed" src="/src/assets/Sad.jpg" v-if="!loginReturn"></img>
    </div>
    
</template>

<script setup>
    import { ref } from 'vue';

    let loginReturnText = '';
    let loginReturn = false;
    let captcha = createCode();

    const inputPW = ref('');
    const inputUN = ref('');
    const inputCP = ref('');
    const isSubmit = ref(false);
    
    function createCode() {
        var code = '';
        var codeLength = 4;
        var random = new Array(
            '0','1','2','3','4','5','6','7','8','9',
            'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'
        )
        for (var i = 0; i < codeLength; i++) {
            var index = Math.floor(Math.random() * 36);
            code += random[index];
        }
        return code;
    }

    function submitLogic() {
        isSubmit.value = true;
        if(inputUN.value === 'admin' && inputPW.value === '1234' && inputCP.value === captcha) {
            loginReturn = true;
            loginReturnText = "登录成功";
        } else {
            loginReturn = false;
            loginReturnText = "登录失败";
        }
    }
</script>